<script type='text/javascript'>
    (function() {
        askbot['settings']['commentsReversed'] = {{ settings.COMMENTS_REVERSED|as_js_bool }};
        //make images always fit the screen
        var images = $('.question-page .post-body img');
        //these breakpoints must match those in css
        //for explanation see utils.js:LimitedWidthImage
        var breakpoints = [
            [980, undefined],
            [800, 55]
        ];
        var maxWidth = 685;
        images.each(function(idx, item) {
            var img = new LimitedWidthImage(breakpoints, maxWidth);
            img.decorate($(item));
        });
    })();
</script>
{% if settings.EDITOR_TYPE == 'tinymce' %}
    {% include "editors/tinymce_scripts.html" %}
{% endif %}
{% compress js %}
<script type="text/javascript" src="{{ '/jslib/editor.js'|media }}"></script>
<script type="text/javascript" src="{{ '/bootstrap/js/bootstrap.js'|media }}"></script>
{% if settings.EDITOR_TYPE == 'markdown' %}
    {% include "meta/markdown_javascript.html" %}
{% endif %}
<script type="text/javascript" src="{{ '/jslib/jquery.validate.min.js'|media }}"></script>
<script type="text/javascript" src="{{ '/jslib/prettify.js'|media }}"></script>
<script type="text/javascript" src="{{ '/js/utils/toggle.js'|media }}"></script>
<script type="text/javascript" src="{{ '/js/utils/expander_toggle.js'|media }}"></script>
<script type="text/javascript" src="{{ '/js/post.js'|media }}"></script>
<script type="text/javascript" src="{{ '/js/utils/editable.js'|media }}"></script>
<script type="text/javascript" src="{{ '/js/forms/form.js'|media }}"></script>
<script type="text/javascript" src="{{ '/js/editors/folded_editor.js'|media }}"></script>
<script type="text/javascript" src="{{ '/js/forms/answer_form.js'|media }}"></script>
{% endcompress %}
<script type="text/javascript">
    // define reputation needs for comments
    askbot['urls']['getPostHtml'] = '{% url get_post_html %}';
    askbot['urls']['retag'] = "{% url retag_question question.id %}";

    {# IMPORTANT !!! the same number for avatar size as in below two lines 
        must be set in the comment_widget macro #}
    {% if request.user.is_authenticated() %}
        askbot['data']['userCommentAvatarUrl'] = '{{ request.user.get_avatar_url(16)|escapejs }}';
    {% endif %}
    askbot['settings']['commentAvatarSize'] = 16;

    $(document).ready(function(){
        $("#nav_questions").attr('className',"on");
        $("#" + askbot['data']['answersSortTab']).attr('className',"on");

        Vote.init(
            askbot['data']['questionId'],
            askbot['data']['threadSlug'],
            askbot['data']['questionAuthorId'],
            askbot['data']['userId']
        );

        if ((askbot['data']['threadIsClosed'] === false) && askbot['data']['userIsAuthenticated']) {
            initEditor();
        }

        lanai.highlightSyntax();
        $('#btLogin').bind('click', function(){
            window.location.href='{{ settings.LOGIN_URL }}';
        });
        if (window.location.hash === 'fmanswer'){
            $('#fmanswer textarea').focus();
        }

        if (askbot['data']['userId'] === askbot['data']['questionAuthorId']) {
            $("#fmanswer_button").click(function() {
                $("#fmanswer").show();
                $("#fmanswer_button").hide();
            });
        }

        if (askbot['data']['userIsAuthenticated']) {
            var draftHandler = new DraftAnswer();
            draftHandler.setThreadId({{ thread.id }});
            draftHandler.decorate($('body'));
        }

        var expanders = $('.expander');
        expanders.each(function(idx, item) {
            var expanderElement = $(item);
            var post = expanderElement.closest('.post,.comment');
            if (post.length === 1) {
                var expander = new PostExpander();
                expander.setPostId(post.data('postId'));
                expander.decorate(expanderElement);
            }
        });

        var followBtn = $('.js-follow-question');
        if (followBtn.length) {
            var toggle = new AjaxToggle();
            toggle.setPostData({'question_id': {{ question.id }} });
            toggle.decorate(followBtn);
            followBtn.bind('askbot.two-state-toggle.success', updateQuestionFollowerCount);
        }
    });

    $(window).bind('hashchange', animate_hashes);

    function animate_hashes(){
      var id_value = window.location.hash;
      if (id_value != ""){
        var previous_color = $(id_value).css('background-color');
        $(id_value).css('backgroundColor', '#FFF8C6');
        $(id_value).animate(
            {backgroundColor: '#ff7f2a'}, 1000
        ).animate({backgroundColor: '#FFF8C6'}, 1000, function(){
            $(id_value).css('backgroundColor', previous_color);
        });
      }
    }


    function initEditor(){
        $('#editor').TextAreaResizer();
        //highlight code synctax when editor has new text
        $("#editor").typeWatch({highlight: false, wait: 3000,
                         captureLength: 5, callback: lanai.highlightSyntax});

        var display = true;
        var txt = "[{% trans %}hide preview{% endtrans %}]";
        $('#pre-collapse').text(txt);
        $('#pre-collapse').bind('click', function(){
            txt = display ? "[{% trans %}show preview{% endtrans %}]" : "[{% trans %}hide preview{% endtrans %}]";
            display = !display;
            $('#previewer').toggle();
            $('#pre-collapse').text(txt);
        });
        var formElement = $('.js-answer-form');
        if (formElement.length) {
            var answerForm = new AnswerForm();
            answerForm.decorate(formElement);
        }
    }
</script>
